<template>
	<view class="nav">

		<scroll-view v-show="isopen" scroll-y="true" class="nav-left" :scroll-top="scrollLeftTop" scroll-with-animation>

			<view class="swicths">
				<view class="swicth" hover-class="click-hover" @click="onclick(item,index)"
					v-for="(item,index) in workNames" :key="index">
					{{item}}
				</view>
			</view>

		</scroll-view>

		<scroll-view v-show="choose" scroll-y="true" class="nav-right" :scroll-into-view="'idx' + scrollRightTop"
			@scroll="scrollTop" scroll-with-animation>

			<view class="mainPage">

				<view class="topic">
					<view class="topicname" :style="{'font-weight': 'bold'}">
						操作任务
					</view>
					<form action="">
						<view class="work">
							<input type="text" class="name" v-model="equipment" placeholder="请输入操作设备名称">
							<view class="workName">
								{{name}}
							</view>
						</view>
					</form>

				</view>
				<view class="content">

					<view class="content-topic" :style="{'font-weight': 'bold'}">
						操作事项
					</view>
					<view class="table">
						<view class="tr bg-w">
							<checkbox class="th" disabled="true" style="width: 10%;" />
							<view class="th" style="width: 10%;">序号</view>
							<view class="th" style="width: 60%;">操作项目</view>
							<view class="th" style="width: 20%;">操作</view>
						</view>
						<block v-for="(item, index) of listData" :key="item.order_number">
							<view class="tr bg-g" v-if="index % 2 == 0">
								<checkbox class="td" style="width: 10%;" disabled="true" />
								<view class="td" style="width: 10%;">{{ item.order_number }}</view>
								<view class="td" v-if="!isinput" style="width: 60%;" ref="data">
									{{ item.text1 }}{{ equipment }}{{ item.text2 }}
								</view>
								<input type="text" v-else v-model="item.text1+equipment+item.text2" class="td"
									style="width: 60%;" ref="data" />
								<view class="td" style="width: 20%;">
									<img src="static/img/up.png" alt="" class="btn-up btn"
										@click="upClick(index,$event)">
									<img src="static/img/down.png" alt="" class="btn-down btn"
										@click="downClick(index,$event)">
									<img src="static/img/delete.png" alt="" class="btn-delete btn"
										@click="delClick(index,$event)">
									<img src="static/img/add.png" alt="" class="btn-down btn"
										@click="addClick(index,$event)">
									<img src="static/img/change.png" alt="" class="btn-delete btn"
										@click="changeClick(index,$event)">
								</view>
							</view>
							<view class="tr" v-else>
								<checkbox class="td" style="width: 10%;" disabled="true" />
								<view class="td" style="width: 10%;">{{ item.order_number }}</view>
								<input type="text" v-if="isinput" v-model="item.text1+equipment+item.text2" class="td"
									style="width: 60%;" ref="data" />
								<view class="td" v-else style="width: 60%;">
									{{ item.text1 }}{{ equipment }}{{ item.text2 }}
								</view>
								<view class="td" style="width: 20%;">
									<img src="static/img/up.png" alt="" class="btn-up btn"
										@click="upClick(index,$event)">
									<img src="static/img/down.png" alt="" class="btn-down btn"
										@click="downClick(index,$event)">
									<img src="static/img/delete.png" alt="" class="btn-delete btn"
										style="background-repeat: no-repeat;" @click="delClick(index,$event)">
									<img src="static/img/add.png" alt="" class="btn-down btn"
										@click="addClick(index,$event)">
									<img src="static/img/change.png" alt="" class="btn-delete btn"
										@click="changeClick(index,$event)">
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="bottom">
					<view class="ticket-box">
						操作人：
						<input type="text" class="worker" v-model="workerName" placeholder="请输入操作人姓名">
					</view>

					<view class="ticket-box">
						监护人：
						<picker mode="selector" :range="watcher" :value="index" @change="pickerChange">
							<view>{{watcher[index]}}</view>
						</picker>
					</view>
					<button size="mini" class="btn-sure btn" @click="newClick">开具</button>
				</view>
			</view>
			<view>
				<img class="img" :src="openImg" alt="" @click="openButton" @mouseenter="setHover">
			</view>

		</scroll-view>

	</view>
</template>

<script>
	
	export default {
		data() {
			
			return {
				scrollLeftTop: '',
				scrollRightTop: '',
				openImg: 'static/img/open.png',
				isopen: true,
				arr: [],
				name: '',
				isinput: false,
				index: 0,
				workerName: '',
				watcherData: [{
					password: "",
					sex: "",
					name: "",
					telephone: "",
					account: 0,
					age: 0,
					status: "",
					area: "",
					identity_card: "",
					depart: ""
				}],
				watcher: ['请选择监护人'],
				choose: false,
				workNames: ['冷备用转热备用', '冷备用转检修', '冷备用转运行', '热备用转冷备用', '热备用转检修', '热备用转运行', '检修转热备用', '检修转冷备用', '运行转冷备用',
					'运行转热备用', '运行转检修'
				],
				equipment: '',

				listData: [{
					content: "检查111压板由投入变为退出",
					e_state: "exit",
					is_complete: 0,
					order_number: 1,
					s_state: "input",
					t_id: 1,
					text1: "检查",
					text2: "111压板由投入变为退出",
				}, ],
				workData: [
					[{
						content: "检查111压板由投入变为退出",
						e_state: "exit",
						is_complete: 0,
						order_number: 1,
						s_state: "input",
						t_id: 1,
						text1: "检查",
						text2: "111压板由投入变为退出",
					}],
				],


			}
		},
		computed: {},
		onShow() {
			uni.request({
				url: this.$api + "/my_tickets/Typicalticket",
				method: 'POST', // 请求方法
				dataType: 'text',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					console.log(res);
					let res1 = JSON.parse(res.data);
					if (res1.state == 200) {
						this.workData = res1.data;
						console.log(res1.data);
						console.log(this.workData);
						console.log("获取数据成功");

					} else {
						uni.showToast({
							title: res1.message,
							icon: 'none'
						})
					}
				}
			})
			uni.request({
				url: this.$api + "/myusers/selectAllOnlineIsTrue",
				method: 'POST', // 请求方法
				dataType: 'text',
				header: {
					'Content-Type': 'application/json'
				},
				success: (res) => {
					console.log(res);
					console.log(res.data);
					let res1 = JSON.parse(res.data);
					if (res1.state == 200) {
						this.watcherData = res1.data;
						console.log(res1.data);
						console.log("获取数据成功");
						for (var i = 0; i < this.watcherData.length; i++) {
							this.watcher.push(this.watcherData[i].name);
						}
					} else {
						uni.showToast({
							title: res1.message,
							icon: 'none'
						})
					}
				}
			})

		},
		methods: {
			scrollTop(e) {
				for (let i = 0; i < this.arr.length; i++) { //遍历各个元素距离顶部的距离
					if (i > 0 && (e.detail.scrollTop >= this.arr[i - 1] && e.detail.scrollTop < this.arr[
							i])) { //判断是否处于某两个子元素之间
						this.scrollLeftTop = i; //滑动左侧到对应的子元素中
						return false;
					} else if (i == 0 && e.detail.scrollTop < this.arr[i]) { //这个是判断是否第一个的，也可以在arr中的第一个加一个0
						this.scrollLeftTop = i;
						return false;
					}
				}
			},
			onclick(item, index) {
				this.name = item;
				this.listData = this.workData[index];
				console.log(this.listData);
				this.choose = !this.choose;
			},
			upClick(index, e) {
				if (index !== 0) {
					this.swapText(index, index - 1);
				}
			},
			downClick(index, e) {
				if (index !== this.listData.length) {
					this.swapText(index, index + 1);
				}
			},
			swapText(i1, i2) {
				let l1 = this.listData[i1];
				let l2 = this.listData[i2];
				let t1 = l1.text1,
					t2 = l1.text2;
				l1.text1 = l2.text1;
				l1.text2 = l2.text2;
				l2.text1 = t1;
				l2.text2 = t2;
			},
			sortList() {
				const li = this.listData;
				for (let i = 0; i < li.length; i++) {
					let s = (i + 1) + '';
					li[i].code = s;
				}
			},
			delClick(index, e) {
				this.listData.splice(index, 1);
				this.sortList();
			},
			addClick(index, e) {
				this.listData.splice(index + 1, 0, {
					code: this.listData[index].code + 1,
					text1: "",
					text2: ""
				});
				for (var i = index + 2; i < this.listData.length; i++) {
					this.listData[i].code += 1;
				}
				this.sortList();
			},
			changeClick(index, e) {
				if (!this.isinput) {
					this.isinput = true;
				} else {
					this.isinput = false;
				}
			},
			openButton(e) {
				if (this.isopen) {
					this.openImg = 'static/img/close.png';
					this.isopen = false;
				} else {
					this.openImg = 'static/img/open.png';
					this.isopen = true;
				}
			},
			setHover(e) {
				if (this.isopen) {
					this.openImg = 'static/img/opening.png';
				} else {
					this.openImg = 'static/img/closing.png';
				}
			},
			pickerChange: function(e) {
				this.index = e.detail.value;
			},
			newClick() {
				var workdata = [{
					order_number: 0,
					content: ""
				}];
				var content = '';
				for (var i = 0; i < this.listData.length; i++) {
					content = this.listData[i].text1 + this.name + this.listData[i].text2;
					if (i == 0) {
						workdata[i].order_number = this.listData[i].order_number;
						workdata[i].content = content;
					} else {
						workdata.push({
							order_number: this.listData[i].order_number,
							content: content
						})
					}

				}
				console.log("现场侧账号为" + this.watcherData[this.index - 1].account);
				uni.request({
					url: this.$api + '/my_tickets/open_ticket1', // 路径
					method: 'POST', // 请求方法
					dataType: 'text',
					data: {
						t_name: this.equipment + this.name,
						on_size_account: this.watcherData[this.index - 1].account,
						supervisor: this.workerName,
						workData: workdata
					}, //发送的数据
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log(res.data.state);
						if (res.statusCode == 200) {
							uni.showToast({
								title: "开具成功",
								icon: 'none'
							})

						} else {
							console.log(that.idValue + '  ' + that.passwordValue + '  ' + that.role[that
								.index]);
							console.log(res.data.code);
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				})
			}
		}

	}
</script>

<style>
	.nav {
		width: 100%;
		height: 100%;
		display: flex;
		/* background-color: #57a68c; */
	}

	.nav-left {
		width: 27%;
		heght: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.nav-right {
		width: 100%;
		heght: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.swicth {
		display: list-item;
		width: 100px;
		height: 30px;
		color: #006f6b;
		/* background-color: #57a68c; */
		border-radius: 8rpx;
		font-size: 14px;
		list-style: none;
		padding: 3px 4px;
		/* border: 1px solid #006f6b; */
		border-bottom: 1px #fff;
	}

	.click-hover {
		background-color: #006f6b;
		color: whitesmoke;
	}

	.workName {
		display: inline-block;
		width: 300px;
		height: 30px;
		align-items: center;
		border: 1px #57a68c;
	}

	.mainPage {
		width: 100%;
		height: 100%;
		flex-grow: 1;
		background-color: #fff;
		overflow: hidden;
		overflow-y: scroll;
		/* border: 10px #e6f3f9; */
		padding: 3px;
	}

	.topic {
		display: block;
		flex-shrink: 0;
		height: 80px;
		margin: 3px 4px;
		position: relative;
		border: 1px solid #9fafaf;
		padding: 5px;
	}

	.bottom {
		width: 100%;
		heght: 100%;
		display: flex;
		flex-direction: column;
	}

	.ticket-box {
		display: flex;
		flex-direction: row;
	}

	.name {
		display: inline-block;
		width: 250px;
		height: 30px;
		position: absolute;
		top: 40px;
		left: 5px;
		border: 1px solid #57a68c;
		border-radius: 10rpx;
	}

	.workName {
		height: 30px;
		position: absolute;
		top: 45px;
		left: 265px;
	}

	.topicname {
		display: block;
	}

	.content {
		flex-shrink: 0;
		flex-direction: row;
		display: block;
		margin: 3px 4px;
	}

	.content-topic {
		display: block;
	}

	.table {
		color: #006f6b;
		padding: 10px;
		border: 1px solid darkgray;
		border-radius: 8rpx;
	}

	.tr {
		display: flex;
		width: 100%;
		justify-content: center;
		white-space: pre-wrap;
		word-wrap: break-word;
		height: auto;
		align-items: center;
	}

	.td {
		justify-content: center;
		text-align: center;
		white-space: pre-wrap;
		word-wrap: break-word;
		height: auto;
	}

	.bg-w {
		background: snow;
	}

	.bg-g {
		background: #e6f3f9;
	}

	.th {
		justify-content: center;
		background: #006f6b;
		color: #fff;
		display: flex;
		height: 3rem;
		align-items: center;
	}

	.btn {
		background-repeat: no-repeat;
		object-fit: contain;
		width: 15%;
		height: 15%;
		margin: 20px, 20px;
		padding: 5px;
	}

	.worker {
		width: 150px;
		height: 30px;
		border: 1px solid #57a68c;
		border-radius: 10rpx;
	}

	.btn-sure {
		background: #006f6b;
		color: #fff;
	}

	.swicths {
		position: relative;
		padding-left: 2px;
	}

	.img {
		background-repeat: no-repeat;
		object-fit: contain;
		width: 40px;
		height: 40px;
		position: absolute;
		float: left;
		left: 0px;
		top: 30%;
		border-radius: 50%;
	}
</style>
